@font20: 20px;
@miancolor: #4294FF;
@fontcolor: #9A9A9A;

body {
    overflow-y: scroll;
    background-color: #f8f8f8;
}

header {
    height: 60px;
    padding: 0 20px;
    line-height: 60px;
    color: @fontcolor;
    ul {
        border-bottom: 1px solid #DDDDDD;
    };
    li {
        position: relative;
        flex: 1;
    };
    .active {
        font-size: @font20;
        color: @miancolor;
        &::after {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%);
            display: block;
            content: "";
            width: 2em;
            height: 2px;
            background-color: @miancolor;
        }
    }
}

main {
    // 视频区
    .icon-leftarrow{
        top: 22px;
        left: 6px;
        z-index: 20;
        color: #fff;
        font-size: 20px;
    };
    #back-icon-svg{
        display: none;
    };
    // 下部内容区域
    .contentBottom {
        padding: 15px;
        // 标题
        .title {
            padding-bottom: 10px;
            height: 76px;
            border-bottom: 1px solid #ccc;
            h3 {
                margin-bottom: 26px;
            };
            .detail {
                height: 18px;
                .fon16 {
                    margin-right: 20px;
                    line-height: 18px;
                    .fon12 {
                        color: @fontcolor;
                        line-height: 18px;
                    }
                }
                span {
                    vertical-align: bottom;
                }
                .peoplenum {
                    vertical-align: bottom;
                    line-height: 100%;
                    color: @fontcolor;
                    line-height: 18px;
                }
            }
        };
        // 用户信息
        .userinfo {
            padding: 15px 0;
            // 用户头部
            .userhead {
                height: 66px;
                margin: 15px 0px;
                .headimg {
                    border: 1px solid #ccc;
                    border-radius: 50%;
                    margin-right: 20px;
                }
                .username {
                    line-height: 20px;
                    .fon12 {
                        color: @fontcolor;
                        line-height: 32px;
                    }
                }
            };
            // 描述文字
            .description {
                align-items:end;
                line-height: 20px;
                p.fon14 {
                    word-break: break-all;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    /* 超出几行省略 */
                    overflow: hidden;
                    color: @fontcolor;
                    flex: 1;
                };
                .more{
                    font-size: 14px;
                }
            };
        }
        // 练习次数及器械
        .practiceinfo{
            margin-top: 20px;
            div{
                flex: 1;
                p{
                    margin-bottom: 10px
                }
                p.fon12{
                    color: @fontcolor
                }
            };
            .machine{
                border-left: 1px dotted #ccc;
                padding-left: 15px;
            }
        }
        // 开始按钮
        .start{
            padding: 0 10px;
            height: 40px;
            background-color: @miancolor;
            color: #fff;
            line-height: 40px;
            border-radius: 20px;
            margin-top: 20px;
        }
    }

}